<template>
  <div>
    <el-dialog
      :title="$t('表单配置')"
      :visible.sync="dialogVisible"
      width="70%"
      custom-class="table-configuration-dialog"
      @close="closeDialog"
    >
      <div class="table-configuration-page">
        <div class="left">
          <div class="search">
            <el-input
              v-model="searchParams"
              class="input-with-select"
              clearable
              @clear="queryAllColumns"
            >
              <el-button slot="append" @click="queryAllColumns">{{
                $t('搜索')
              }}</el-button>
            </el-input>
          </div>
          <div class="configuration-con">
            <div
              v-for="(group, index) in allColumns"
              :key="index"
              class="configuration-group"
            >
              <div class="configuration-group-name">
                <span>{{ group.groupName }}</span>
                <i
                  class="el-icon-arrow-up"
                  v-if="group.isExpand"
                  @click="group.isExpand = false"
                ></i>
                <i
                  class="el-icon-arrow-down"
                  v-else
                  @click="group.isExpand = true"
                ></i>
              </div>
              <div v-if="group.isExpand" class="configuration-group-checked">
                <el-row>
                  <el-col
                    :span="6"
                    v-for="item in group.reportInfo"
                    :key="item.columnName"
                  >
                    <el-checkbox
                      v-model="item.isSelect"
                      :true-label="1"
                      :false-label="0"
                      @change="(arg) => doSelected(arg, item)"
                      >{{ item.columnTitle }}</el-checkbox
                    >
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="right-header">
            <el-row>
              <el-col :span="6">{{ $t('按照拖拽顺序') }}</el-col>
              <el-col :span="6">{{ $t('顺序') }}</el-col>
              <el-col :span="6">{{ $t('字段名称') }}</el-col>
              <el-col :span="6">{{ $t('是否冻结') }}</el-col>
            </el-row>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetConfig">{{ $t('恢复默认') }}</el-button>
        <el-button type="primary" @click="confirmSave()">{{
          $t('确 定')
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import globalService from '@/services/globalService'
export default {
  components: {},
  props: {
    type: Number,
    apiObj: {
      type: Object,
      default: () => {
        return {
          configApi: 'queryGoodsConfig', //查询配置之后的列
          allColumnsApi: 'queryAllColumns', //查询所有的列
          saveApi: 'saveGoodsConfig', //保存配置
          resetApi: 'queryDefaultReportConfig', //恢复配置
        }
      },
    },
  },
  data() {
    return {
      dialogVisible: true,
      searchParams: '',
      selectedColumns: [],
      allColumns: [],
      originalSelectedColumns: [],
      originalAllColumns: [],
    }
  },
  created() {
    this.querySelectedColumns()
    this.queryAllColumns()
  },
  methods: {
    querySelectedColumns() {
      let vm = this
      globalService[this.apiObj['configApi']]({
        reportType: this.type,
      }).then((res) => {
        this.originalSelectedColumns = res.data
        let data = res.data
        vm.selectedColumns = data.map((it, index) => {
          return {
            ...it,
            sort: index + 1,
          }
        })
        vm.allColumns.forEach((it, index) => {
          it.reportInfo.forEach((column) => {
            let selected = vm.originalSelectedColumns.find(
              (selected) => selected.columnName == column.columnName
            )
            vm.$set(column, 'isSelect', selected ? 1 : column.isSelect)
            vm.$set(
              column,
              'defaultShow',
              selected ? selected.defaultShow : column.defaultShow
            )
            vm.$set(
              column,
              'isFreeze',
              selected ? selected.defaultFreeze : column.isFreeze
            )
            vm.$set(
              column,
              'defaultFreeze',
              selected ? selected.defaultFreeze : column.defaultFreeze
            )
          })
        })
      })
    },
    queryAllColumns() {
      let vm = this
      let api = null
      api = globalService[this.apiObj['allColumnsApi']]({
        reportType: this.type,
        key: this.searchParams,
      })
      api.then((res) => {
        vm.originalAllColumns = res.data
        vm.allColumns = res.data.map((it, index) => {
          return {
            ...it,
            isExpand: true,
            reportInfo: it.reportInfo.map((column) => {
              let selected = vm.originalSelectedColumns.find(
                (selected) => selected.columnName == column.columnName
              )
              return {
                ...column,
                isSelect: selected ? 1 : column.isSelect,
                defaultShow: selected
                  ? selected.defaultShow
                  : column.defaultShow,
                isFreeze: selected ? selected.defaultFreeze : column.isFreeze,
                defaultFreeze: selected
                  ? selected.defaultFreeze
                  : column.defaultFreeze,
              }
            }),
          }
        })
      })
    },
    closeDialog() {
      this.dialogVisible = false
      this.$emit('input', false)
    },
    confirmSave() {
      let defaultArr = []
      let columns = []
      // this.allColumns.forEach(it => {
      //     it.reportInfo.forEach(item => {
      //         if(item.defaultShow == 1){
      //             defaultArr.push(item)
      //         }
      //     })
      // })
      columns = defaultArr.concat(this.selectedColumns)
      let params = {
        reportType: this.type,
        reportBaseInfo: columns.filter((it) => {
          return it.type == 1
        }),
        reportOtherInfo: columns.filter((it) => {
          return it.type == 2
        }),
      }
      globalService[this.apiObj['saveApi']](params).then((res) => {
        this.$message.success(this.$t('设置成功'))
        this.$emit('reload')
        this.dialogVisible = false
      })
    },
    resetConfig() {
      let vm = this
      globalService[this.apiObj['resetApi']]({
        reportType: this.type,
      }).then((res) => {
        vm.originalSelectedColumns = res.data
        let data = res.data.filter((it) => {
          return it.defaultShow == 0 || !it.defaultShow
        })
        vm.selectedColumns = data.map((it, index) => {
          return {
            ...it,
            sort: index + 1,
          }
        })
        vm.allColumns = vm.originalAllColumns.map((it, index) => {
          return {
            ...it,
            isExpand: true,
            reportInfo: it.reportInfo.map((column) => {
              let selected = vm.originalSelectedColumns.find(
                (selected) => selected.columnName == column.columnName
              )
              return {
                ...column,
                isSelect: selected ? 1 : column.isSelect,
                defaultShow: selected
                  ? selected.defaultShow
                  : column.defaultShow,
                isFreeze: selected ? selected.defaultFreeze : column.isFreeze,
                defaultFreeze: selected
                  ? selected.defaultFreeze
                  : column.defaultFreeze,
              }
            }),
          }
        })
      })
    },
    onEnd(data) {
      this.resetSort()
    },
    doSelected(flag, data) {
      if (flag) {
        this.selectedColumns.push({
          ...data,
          sort: this.selectedColumns.length,
        })
      } else {
        let index = this.selectedColumns.findIndex(
          (it) => it.columnName == data.columnName
        )
        this.selectedColumns.splice(index, 1)
      }
      this.resetSort()
    },
    resetSort() {
      this.selectedColumns.forEach((it, index) => {
        it.sort = index + 1
        if (index > 2 && it.isFreeze == 1) {
          it.isFreeze = 0
        }
      })
    },
    changeSortByInput(value, data, index) {
      if (value < 1) {
        this.$message.error(this.$t('顺序至少为1'))
        return
      }
      let newValue = value
      if (value > this.selectedColumns.length) {
        newValue = this.selectedColumns.length
      }
      //原有index的为selectedColumns原value - 1的值，现value - 1的值为data,然后重置一下selectedColumns的sort
      this.selectedColumns[index] = this.selectedColumns[newValue - 1]
      this.selectedColumns[newValue - 1] = data
      this.resetSort()
    },
  },
}
</script>
<style lang="scss">
.table-configuration-dialog {
  .table-configuration-page {
    display: flex;
    .left {
      width: 46%;
      margin-right: 41px;
      .search {
        margin-bottom: 18px;
        .el-button {
          color: #fff;
          background-color: #4e6df6;
          border-color: #4e6df6;
        }
      }
      .configuration-con {
        padding: 18px 20px;
        background: #f3f3f3;
        border-radius: 4px;
        height: calc(100% - 50px);
        .configuration-group {
          .configuration-group-name {
            margin-bottom: 18px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            i {
              margin-left: 24px;
              cursor: pointer;
            }
          }
        }
      }
    }
    .configuration-group-checked {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      .el-row {
        width: 100%;
      }
      .el-checkbox {
        margin-bottom: 14px;
      }
    }
    .right {
      flex: 1;
      padding-top: 74px;
      .right-header {
        text-align: center;
      }
      .right-select {
        text-align: center;
        padding: 10px 0px;
        border-bottom: 1px solid #e1e1e1;
        line-height: 30px;
      }
      .el-icon-rank {
        cursor: move;
      }
    }
  }
}
</style>
